<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*子元素选择器 */
        /* div>span{
            color: green;
        } */
        /* .div>.p{
            color: red;
        } */
        /* 后代选择器 选择指定元素内指定后代 */
        /* div span{
            color: blue;
        } */
        /* .div>.p>.span2{
            color: red;
        } */
        /* 选择下一个兄弟 */
        /* p+span{
            color: red;
        } */
        /* 选择下面所有兄弟 */
        p~span{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div">
        div
        <!-- 父元素  直接关系
            子元素   直接关系
            祖先元素  直接或间接
            后代元素  直接或间接
            兄弟元素   拥有相同父元素-->
        <p class="p">
            div的p
            <span class="span2">p的 span</span>
        </p>
        <span class="span">
            div的span
        </span>
        <span class="span3">
            div的span2
        </span>

    </div>
    
</body>
</html>